<template>
  <layout class="layout-100" v-if="model">
    <Header class="header-cont main__title--top">每月动态配置</Header>
    <Content class="content-cont">
      <Form ref="formData" :model="formData" label-position="top">
        <Row>
          <Col span="24">
            <FormItem label="审批人" :required="true">
              <Row v-for="(item,index) in approvalPerson">
                <Input style="width:350px;" placeholder="请选择"  @on-focus="checkPerson(index,1)" v-model.trim="item.name" readonly/>
                <Icon
                  style="margin-top:20px;"
                  type="ios-add-circle-outline"
                  size="20"
                  color="#0099FF"
                  @click="addPerson"
                />
                <Icon
                  type="ios-remove-circle-outline"
                  @click="remove(index)"
                  size="20"
                  v-show="index !=0"
                  color="#999999"
                />
              </Row>
            </FormItem>
          </Col>
          <Col span="24">
            <FormItem label="签发人" :required="true">
              <Input style="width:350px;" placeholder="请选择"  @on-focus="checkPerson(index,2)" v-model.trim="approvalPerson2.name" readonly/>
            </FormItem>
          </Col>
        </Row>
      </Form>

    </Content>
    <Footer class="footer-cont">
      <Button type="primary" @click="saveSubmit()">保存</Button>
      <Button @click="closetab">取消</Button>
    </Footer>
  </layout>
  <checkPersonModal @func="getMsg" v-else-if="!model"></checkPersonModal>
</template>
<script>
  import checkPersonModal from '../../views/MeasurePlan/checkPersonModal'
  import { mapMutations } from 'vuex'
  export default {
    components: { checkPersonModal },
    name: "monthly-dynamics-dispose",
    data() {
      return {
        active:'1',
        formData:{},//隐患详情
        time:'',
        id:this.$route.params.id,
        MeasuresDetails:[],//措施详情
        approvalPerson:[{
          name:'',
          id:'',
        }],//审批人
        userDetail: JSON.parse(localStorage.getItem('userDetail')),
        approvalPerson2:{},
        checkType:'',
        index:'',
        personType:JSON.parse(localStorage.getItem('personType')),
        model:true,
      }
    },
    methods: {
      ...mapMutations(['closeTag']),
      closetab() {
        /**
         * 如果是调用closeTag方法，普通的页面传入的对象参数只需要写name字段即可
         * 如果是动态路由和带参路由，需要传入query或params字段，用来区别关闭的是参数为多少的页面
         */
        this.closeTag({
          name: this.$route.name,
          params: {...this.$route.params},
        });
        this.$router.push({path:'/dynamic-control/monthly-dynamics'});
      },
      addPerson() {
        if(this.approvalPerson.length>2){
          this.$Message.warning('最多添加三个审核人');
          return;
        }
        this.approvalPerson.push({
          name:'',
          id:'',
        })
      },
      checkPerson(index,type){
        this.index = index;
        this.checkType = type;
        this.model = false;
      },
      getMsg(data){
        if(data == 0){
          this.model = true;
        }else{
          if(this.checkType == 1){
            let addType = true;
            this.approvalPerson.forEach(item=>{
              if(item.id == data.personUserOrgId){
                addType = false;
              }
            })
            if(addType){
              this.approvalPerson[this.index] = {
                name:data.name,
                id:data.personUserOrgId
              }
            }
          }else{
            this.approvalPerson2 = {
              name:data.name,
              id:data.personUserOrgId
            }
          }
          this.model = true;
        }
      },
      remove(row) {
        this.approvalPerson.splice(row, 1)
      },
      getAppConfig(){
        this.$api.MonthlyDynamics.getDynamicApprovalPointApprovalConfigquery().then(res => {
          if (res.code === 200) {
            if(res.data.approval.length>0){
              this.approvalPerson = [];
              res.data.approval.forEach(item=>{
                this.approvalPerson.push({
                  name:item.personName,
                  id:item.approvalPerId
                })
              })
            }
            if(res.data.issue){
              this.approvalPerson2 = {
                name:res.data.issue.personName,
                id:res.data.issue.approvalPerId
              };
            }
          } else {
            this.$Message.error(res.message)
          }
        })
      },
      saveSubmit(){
        let ids1 = [];
        if(this.approvalPerson.length === 0){
          this.$Message.warning('审批人不能为空');
          return;
        }
        if(!this.approvalPerson2.id){
          this.$Message.warning('签发人不能为空');
          return;
        }
        this.approvalPerson.forEach(item=>{
          if(item.id){
            let approvalPerId = {
              approvalPerId:item.id,
            };
            ids1.push(approvalPerId);
          }
        })
        let data = {
          "approval": ids1,
          "issue": {
            approvalPerId:this.approvalPerson2.id
          }
        }
        this.$api.MonthlyDynamics.getDynamicApprovalPointApprovalConfiginsert(data).then(res => {
          if (res.code == 200) {
            this.closetab();
            this.$Message.success('保存成功')
          } else {
            this.$Message.error('保存失败')
          }
        })
      }
    },
    mounted () {
      this.getAppConfig();
    }
  }
</script>

<style scoped>

</style>
